<!--
 * @Author: yangmy
 * @Date: 2022-03-17 14:37:25
 * @FileDescription:顶部轮播
-->
<template>
  <div class="swiper-top">
    <div class="left-arrow" @click="onLeftArrow">
      <img src="../img/left-arrow.png" alt="" />
    </div>
    <div class="swiper">
      <div class="swiper-box" :style="{ marginLeft: LeftRoll * 187 + 'px' }">
        <div
          v-for="item in data"
          :key="item.classId"
          @click="onChoice(item)"
          :class="[
            'swiper-item',
            item.classId == categoryIndex ? 'swiper-item-click' : ''
          ]"
        >
          <div v-if="item.name != '全部'" class="item-con">
            <img
              :src="
                item.img && '' + item.img.slice(item.img.indexOf('/images'))
              "
              alt=""
            />
            <p>{{ item.name }}：{{ item.value }}</p>
          </div>
          <div v-else class="item-con">
            <p class="name">全部</p>
            <p>{{ item.value }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="right-arrow" @click="onRightArrow">
      <img src="../img/right-arrow.png" alt="" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import httpRequest from '@/service'
export default defineComponent({
  name: 'swiperTop',
  components: {},
  setup(props, { emit }) {
    const state: any = reactive({
      data: [],
      LeftRoll: 0,
      categoryIndex: null,
      getData: () => {
        httpRequest
          .get({ url: 'M3P2splb' })
          .then((res) => {
            if (res.code == 200) {
              state.data = res.data
              /**
               * 默认选中逻辑
               * 要是有默认选中的，就用默认的
               * 要是没有就默认选中的，就用蔬菜
               * 要是没有蔬菜，就用第一个
               */
              const dataItem = res.data.find(
                (i: any) => i.name === (res.default ? res.default : '蔬菜')
              )
              let changeClassId = ''
              dataItem
                ? (changeClassId = dataItem.classId)
                : (changeClassId = res.data[0].classId)
              state.categoryIndex = changeClassId
              emit('change', changeClassId)
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    const onLeftArrow = () => {
      if (state.LeftRoll < 0) {
        state.LeftRoll += 1
      }
    }
    const onRightArrow = () => {
      if (-state.LeftRoll + 8 < state.data.length) {
        state.LeftRoll -= 1
      }
    }
    const onChoice = (e: any) => {
      state.categoryIndex = e.classId
      emit('change', e.classId)
    }
    state.getData()
    const { data, categoryIndex, LeftRoll } = toRefs(state)
    return {
      data,
      categoryIndex,
      onLeftArrow,
      onRightArrow,
      onChoice,
      LeftRoll
    }
  }
})
</script>
<style lang="less" scoped>
.swiper-top {
  height: 120px;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.1);
  background-color: rgba(0, 104, 183, 0.1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 999;
  .swiper {
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    .swiper-box {
      display: flex;
      transition: all 0.6s ease;
      overflow: hidden;
      height: 100%;
    }
    .swiper-item {
      width: 153px;
      // height: 127px;
      text-align: center;
      font-size: 18px;
      font-family: 'Microsoft YaHei';
      color: rgba(255, 255, 255, 0.8);
      margin: 0 17px;
      flex-shrink: 0;
      height: 100%;
      .item-con {
        // padding-top: 2px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .name {
          font-size: 36px;
          font-family: 'AliHYAiHei';
          color: rgb(162, 199, 255);
          text-align: center;
          line-height: 61px;
        }
        img {
          width: 86px;
          height: 70px;
          transform: scale(1.25);
        }
        p {
          padding-top: 5px;
        }
      }
    }
    .swiper-item-click {
      background-image: url('../img/mengceng.png');
      background-size: 100% 100%;
      height: 100%;
    }
  }
}
</style>
